<template>
  <div id="item4Main" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
import api from '../utils/api';
export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  async mounted() {
    let dataList = [];
    await api.getJCPLZBByPFMarket().then((res) => {
      res.data.forEach((item) => {
        dataList.push({
          name: item.name,
          value: item.bfb.replace('%', ''),
        });
      });
    });
    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });
    this.option = {
      title: {
        text: '检测品类占比',
        top: 7,
        left: 11,
        textStyle: {
          color: '#fff',
          fontSize: 14,
          fontWeight: '600',
        },
      },
      // color: ['#00b1f2', '#ff921d', '#7bed75', '#4df9ff', '#e8ff7f'],
      legend: {
        type: 'plain',
        left: 11,
        top: '30%',
        align: 'left',
        width: 240,
        itemGap: 10,
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度
        symbolKeepAspect: false,
        formatter: (name) => {
          let data = dataList;
          let total = 0;
          let tarValue;
          for (let i = 0; i < data.length; i++) {
            total += data[i].value;
            if (data[i].name == name) {
              tarValue = data[i].value;
            }
          }
          let v = tarValue;
          //计算出百分比
          return `${name}  ${v} `;
          //name是名称，v是数值
        },
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      series: [
        {
          zlevel: 1,
          type: 'gauge',
          radius: '90%',
          center: ['80%', '50%'],
          startAngle: '360',
          endAngle: '0',
          min: 0,
          max: 100,
          pointer: {
            show: false,
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 1,
            },
          ],

          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, '#2E486A']],
              width: 2,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: -44,
            lineStyle: {
              color: '#051932',
              width: 0,
              type: 'solid',
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: 'gauge',
          radius: '105%',
          center: ['80%', '50%'],
          splitNumber: 80,
          startAngle: 360,
          endAngle: 0,
          hoverAnimation: true,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 5,
            lineStyle: {
              width: 2,
              fontWeight: 400,
              color: '#1A2D78',
            },
          },

          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        {
          type: 'pie',
          hoverAnimation: true,
          hoverOffset: 25,
          startAngle: 180, //起始角度
          clockwise: false, //是否顺时针
          radius: ['50%', '70%'],
          center: ['80%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#121B43',
            borderWidth: 2,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '24',
              formatter: (params) => {
                return `{name|${params.percent}%}\n{value|${params.name}}`;
              },
              rich: {
                name: {
                  fontSize: 24,
                  lineHeight: 24,
                  color: '#05aaff',
                },
                value: {
                  color: '#a7a9c7',
                  fontSize: 16,
                  lineHeight: 24,
                  color: '#fff',
                },
              },
            },
          },
          label: {
            show: false,
            position: 'center',
            color: 'rgba(13, 17, 29,0)',
          },
          labelLine: {
            show: false,
          },
          data: dataList,
          zlevel: 30,
        },
        {
          zlevel: 1,
          type: 'gauge',
          radius: '45%',
          center: ['80%', '50%'],
          startAngle: '360',
          endAngle: '0',
          min: 0,
          max: 100,
          pointer: {
            show: false,
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 1,
            },
          ],

          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, '#2E486A']],
              width: 2,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: -44,
            lineStyle: {
              color: '#051932',
              width: 0,
              type: 'solid',
            },
          },
          axisLabel: {
            show: false,
          },
        },
      ],
    };
    this.myChart.clear();
    // 设置实例参数
    this.myChart.setOption(this.option);
    let index = 0;
    let lastIndex = 0;
    setInterval(() => {
      // 取消上一个数据项的高亮效果
      if (index > 0) {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 2,
          dataIndex: lastIndex,
        });
      }
      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 2,
        dataIndex: index,
      });
      lastIndex = index;
      ++index;
      if (index > dataList.length) {
        index = 0;
      }
    }, 3000);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#item4Main {
  width: 100%;
  height: 100%;
  padding-right: 10px;
}
</style>
